<template>
    <div class="add_shortcut">
        <div>
            <el-form :model="shortcutstate.formData" label-width="120px" style="max-width: 600px">
                <el-form-item label="快捷键：">
                    <el-input v-model="shortcutstate.formData.keyPressed" type="text" @keydown="updateKeyPressed"
                        readonly @keyup="updateKeyPressed2" style="width: 300px" />
                </el-form-item>
                <el-form-item label="名称：">
                    <el-input v-model="shortcutstate.formData.name" style="width: 300px" />
                </el-form-item>
                <el-form-item label="平台：">
                    <el-select v-model="shortcutstate.formData.bc_type" popper-class="bctype_popper" placeholder="平台"
                        style="width: 300px">
                        <el-option v-for="item in state.permissionBctypes" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="玩法：">
                    <el-select v-model="shortcutstate.formData.sport" popper-class="bctype_popper" 
                        placeholder="玩法" style="width: 300px">
                        <el-option label="足球" value="soccer" />
                        <el-option label="篮球" value="basketball" />
                    </el-select>
                </el-form-item>
                <el-form-item label="赔率下浮点数：">
                    <el-input v-model="shortcutstate.formData.points" style="width: 300px" />
                </el-form-item>
                <el-form-item label="用户分组：">
                    <el-select v-model="shortcutstate.formData.userId" popper-class="bctype_popper" placeholder="用户分组"
                        @change="changuser()" style="width: 300px">
                        <el-option v-for="item in state.users" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="下单金额：">
                    <el-input-number v-model="shortcutstate.formData.stake" style="width: 300px" :controls="false" />
                </el-form-item>
                <el-form-item label="订单模式：">
                    <el-select v-model="shortcutstate.formData.order_mode" popper-class="bctype_popper" @change="changeordermode"
                        placeholder="订单模式" style="width: 300px">
                        <el-option label="单账号" value="one_user" />
                        <el-option label="多账号" value="all_user" />
                    </el-select>
                </el-form-item>
                <el-form-item label="账号：" v-if="shortcutstate.formData.order_mode == 'one_user'">
                    <el-select v-model="shortcutstate.formData.user" popper-class="bctype_popper" @focus="focususerId"
                        placeholder="账号" @change="changeuser" style="width: 300px">
                        <template v-if="shortcutstate.users[shortcutstate.formData.bc_type]">
                            <el-option v-for="item in shortcutstate.users[shortcutstate.formData.bc_type]"
                                :key="item.user_value.id" :label="item.user_name" :value="item.user_value.id" />
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="账号：" v-if="shortcutstate.formData.order_mode == 'all_user'">
                    <el-select v-model="shortcutstate.formData.user_id_list" multiple :max-collapse-tags="2"
                        collapse-tags popper-class="bctype_popper" placeholder="账号选择" @focus="focususerId2" style="width: 300px">
                        <template v-if="shortcutstate.users[shortcutstate.formData.bc_type]">
                            <el-option v-for="item in shortcutstate.users[shortcutstate.formData.bc_type]"
                                :key="item.user_value.id" :label="item.user_name" :value="item.user_value.id" />
                        </template>

                    </el-select>
                </el-form-item>
                <el-form-item label="下单模式：">
                    <el-select v-model="shortcutstate.formData.place_mode" popper-class="bctype_popper"
                        placeholder="下单模式" style="width: 300px">
                        <el-option label="依次下单" :value="0" />
                        <el-option v-if="shortcutstate.formData.order_mode == 'all_user'" label="同时下单" :value="1" />
                        <el-option v-if="shortcutstate.formData.sport == 'basketball' && shortcutstate.formData.order_mode == 'all_user'" label="循环下单" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="超时：">
                    <el-select v-model="shortcutstate.formData.runtime" popper-class="bctype_popper" placeholder="超时"
                        style="width: 300px">
                        <el-option v-for="item in overtimeList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="金额分配："
                    v-if="shortcutstate.formData.order_mode == 'all_user' && (shortcutstate.formData.place_mode == 1 || shortcutstate.formData.place_mode == 2)">
                    <el-select v-model="shortcutstate.formData.money_mode" popper-class="bctype_popper"
                        placeholder="金额分配" style="width: 300px">
                        <el-option label="平均分配" value="average" />
                        <el-option label="最高限额" value="max" />
                    </el-select>
                </el-form-item>
                <el-form-item label="间隔时间：" v-if="shortcutstate.formData.place_mode == '0'">
                    <el-input-number v-model="shortcutstate.formData.order_second" placeholder="间隔时间" :controls="false"
                        style="width: 300px">
                        <template #suffix>
                            <div class="el-input__icon">秒</div>
                        </template>
                    </el-input-number>
                </el-form-item>


            </el-form>
        </div>
        <div class="add_footer">
            <div class="button" @click="submit()">保存</div>
        </div>
    </div>
</template>


<script setup>
import { http } from '@/utils/http'
import { getPlatformUser, getMoneyLimit } from '@/api/user'
import { ElMessage } from 'element-plus'
const { shortcutstore, shortcutstate } = inject('shortcutSell')
const { store, state } = inject('Sell')

const keyArr = ref([])

const usertype = ref({
    type: 0,
    min: 0,
    max: 0
})

const overtimeList = ref([
    {
        value: -1,
        label: '持续打单',
    },
    {
        value: -2,
        label: '关盘停止',
    },
    {
        value: -3,
        label: '赛前',
    },
    {
        value: -4,
        label: '赛中',
    },
    {
        value: -5,
        label: '赛前+赛中',
    },
    {
        value: 5,
        label: '5s停止',
    },
    {
        value: 10,
        label: '10s停止',
    },
    {
        value: 20,
        label: '20s停止',
    },
    {
        value: 30,
        label: '30s停止',
    },
    {
        value: 60,
        label: '1min停止',
    },
    {
        value: 120,
        label: '2min停止',
    },
    {
        value: 300,
        label: '5min停止',
    },
    {
        value: 600,
        label: '10min停止',
    },
    {
        value: 900,
        label: '15min停止',
    },
    {
        value: 1200,
        label: '20min停止',
    },
    {
        value: 2400,
        label: '30min停止',
    },
])



const updateKeyPressed = (event) => {
    if (event.type == 'keydown' && event.key != 'Meta' && event.key != 'Escape' && event.key != 'Insert' && event.key != 'F11' && event.key != 'F12' && event.key != 'Enter' && event.key != 'Tab' && event.key != 'CapsLock' && event.key != 'CapsLock') {
        if (shortcutstate.formData.keyPressed != 'Ctrl+' && shortcutstate.formData.keyPressed != 'Alt+' && shortcutstate.formData.keyPressed != 'Shift+') {
            shortcutstate.formData.keyPressed = ''
        }
        if (event.key == 'Control') {
            shortcutstate.formData.keyPressed = 'Ctrl' + `+`
            keyArr.value = [event]
        } else if (event.key == 'Backspace') {
            setTimeout(() => {
                shortcutstate.formData.keyPressed = '空'
                keyArr.value = []
            }, 100);
        } else if (event.key == 'Alt' || event.key == 'Shift') {
            shortcutstate.formData.keyPressed = event.key + `+`
            keyArr.value = [event]
        } else {
            if (shortcutstate.formData.keyPressed == 'Ctrl+' || shortcutstate.formData.keyPressed == 'Alt+' || shortcutstate.formData.keyPressed == 'Shift+') {
                shortcutstate.formData.keyPressed += event.key
            } else {
                setTimeout(() => {
                    shortcutstate.formData.keyPressed = event.key
                    keyArr.value.push(event)
                }, 100);

            }
        }
    }


}

const updateKeyPressed2 = (event) => {
    if (shortcutstate.formData.keyPressed == 'Ctrl+' || shortcutstate.formData.keyPressed == 'Alt+' || shortcutstate.formData.keyPressed == 'Shift+') {
        setTimeout(() => {
            shortcutstate.formData.keyPressed = '空'
            keyArr.value = []
        }, 100);
    }
}

const changuser = () => {
    getPlatformUser({ id: shortcutstate.formData.userId }).then(res => {
        shortcutstate.users = res.data
    })
}
const changeuser = () => {

}

const submit = () => {
    let body = JSON.parse(JSON.stringify(shortcutstate.formData))
    body.points = parseFloat(shortcutstate.formData.points)
    body.id = String(shortcutstate.updatashortcut.id)
    console.log(body);

    http.post('/order/creat_update_shortcut_key', body).then((res) => {
        // ElMessage({
        //     message: res.msg
        // })
        shortcutstate.addshow = false
        shortcutstore.getshortcutkeylist(true)
    })
}

const focususerId2 = () => {
    shortcutstate.userdialog = {
        show: true,
        type: 'checked',
        radiouser: shortcutstate.formData.user_id_list,
        field: 'user_id_list'
    }
}
const focususerId = () => {
    shortcutstate.userdialog = {
        show: true,
        type: 'radio',
        radiouser: shortcutstate.formData.user,
        field: 'user'
    }
}

const changeordermode = () => {
    shortcutstate.formData.user_id_list = []
    shortcutstate.formData.user = ''
}
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.add_shortcut {
    padding-top: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.add_footer {
    width: 100%;
    height: 48px;
    // background-color: red;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .button {
        width: 52px;
        height: 28px;
        padding: 4px 12px;
        background-color: #ff6002;
        color: #fff;
        cursor: pointer;
    }
}
</style>

<style>
.bctype_popper {
    z-index: 4006 !important;
}
</style>